<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>把所有大家分享的资料整合</title>
	<link rel="stylesheet" href="">
	<style type="text/css" media="screen">
		*{
			padding: 0;
			margin: 0;
			height: 100%;
		}
		p span{
			font-size: 20px;
		}
		.serchbox{
			width: 600px;
			margin: 20px auto;
			height: 35px;
			overflow: hidden;
		}
		.cred{
			color: red;
			font-size: 18px;
		}
		.listbox{
			width: 1200px;
			margin: 50px auto;
		}
		.listbox p{
			float: left;
			width: 300px;
			margin-right: 150px;
			margin-bottom: 40px;
			box-shadow:  0 0 15px #eee;
			border-radius: 5px;
			height: 300px;

		}
		.listbox p:nth-child(3n){
			margin-right: 0;
		}
		.listbox p >a:nth-child(2){
			width: 200px;
			margin: auto;
			margin-top:50px; 
			height: 150px;
		    font-size: 18px;
		    color: #000;
		    letter-spacing: -0.1px;
		    line-height: 26px;
		    overflow: hidden;
		    text-overflow: ellipsis;
		    display: -webkit-box;
		    -webkit-line-clamp: 2;
		    -webkit-box-orient: vertical;
		    font-weight: 300;
		    text-decoration: none;
		}
		.listbox p >span{
			width: 100%;
			margin: auto;
			display: block;
			overflow: hidden;
			white-space: nowrap;
			text-align: center;
			text-overflow: ellipsis;
		}
		.listbox p >span:nth-child(1){
			font-size: 20px;
			line-height: 36px;
			text-align: center;
			height: 60px;
			color: #fff;
			border-radius: 5px;
			line-height: 60px;
		}
		.listbox p:nth-child(3n+1) >span:nth-child(1){
			background:#F85353;
		}
		.listbox p:nth-child(3n-1) >span:nth-child(1){
			background:#30DBF0;
		}
		.listbox p:nth-child(3n) >span:nth-child(1){
			background:#D3E82F;
		}
		.menu{
			position: fixed;
			transition: 1s ease;
			height: 100%;
			top: 0;
			left: -250px;
		}
		.menu ul{
			width:250px;
			background: #F3BB34;
			overflow-y: auto;
			padding: 20px 0;
			height: 100%;
		}
		.menu li{
			height: 30px;
			position: relative;
			width: 100%;
		}
		.menu li a{
			position: absolute;
			left: 0;
			right: 0;
			text-align: center;
			line-height: 30px;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			padding: 0 15px;
			text-decoration: none;
			color: #fff;
		}
		.menu .btn{
			position: absolute;
			font-size: 15px;
			background: #F3BB34;
			color: #fff;
			width: 20px;
			text-align: center;
			left: 250px;
			height: 44px;
			top: 50%;
			margin-top: -22px;
			cursor:pointer;
			border-radius: 0 5px 5px 0;
		}
		.menu.active{
			left: 0px;
		}
	</style>
</head>
<body>
	<div class="menu">
		<ul>
			<li><a href="#0" title="">q</a></li>
		</ul>
		<div class="btn">
			展开
		</div>
	</div>
	<div class="listbox">
	<p><span>阿里秋招内推编程题:</span><a href="https://segmentfault.com/a/1190000010579052">https://segmentfault.com/a/1190000010579052</a>
		<span class="cred">
		讲师-快乐动起来啊
	</span></p>
	<p><span>网易前端实习笔面试:</span><a href="http://www.jianshu.com/p/bf3038717433?utm_campaign=hugo&utm_medium=reader_share&utm_content=note&utm_source=qq">http://www.jianshu.com/p/bf3038717433?utm_campaign=hugo&utm_medium=reader_share&utm_content=note&utm_source=qq</a>
		<span class="cred">
		樛木
	</span></p>
	<p><span>Web前后端漏洞分析与防御-知识梳理:</span><a href="https://github.com/TYRMars/WebsafeLearn">https://github.com/TYRMars/WebsafeLearn</a>
		<span class="cred">
		 e^(iπ)+1=0<zhangjianan1996@vip.qq.com>
	</span></p>
	<p><span>ES6，新语法学习:</span><a href="https://github.com/TYRMars/JSLearn-ES6">https://github.com/TYRMars/JSLearn-ES6</a>
		<span class="cred">
		  e^(iπ)+1=0<zhangjianan1996@vip.qq.com>
	</span></p>
	<p><span>基础JavaScript学习:</span><a href="https://github.com/TYRMars/JSLearn">https://github.com/TYRMars/JSLearn</a>
		<span class="cred">
		  e^(iπ)+1=0<zhangjianan1996@vip.qq.com>
	</span></p>
	<p><span>《深入理解ES6》教程学习笔记:</span><a href="https://github.com/hyy1115/ES6-learning">https://github.com/hyy1115/ES6-learning</a>
		<span class="cred">
		  e^(iπ)+1=0<zhangjianan1996@vip.qq.com>
	</span></p>
	<p><span>基于Raphael的电子图表:</span><a href="https://github.com/cucygh/v-figure">https://github.com/cucygh/v-figure</a>
		<span class="cred">
		  e^(iπ)+1=0<zhangjianan1996@vip.qq.com>
	</span></p>
	<p><span>ES6-彩票的同学写了构建工具:</span><a href="https://gitlab.com/imooc/es6-build">https://gitlab.com/imooc/es6-build</a>
		<span class="cred">
		 讲师-快乐动起来啊
	</span></p>
	<p><span>script标签到底该放在哪里:</span><a href="http://blog.csdn.net/ybdesire/article/details/49284699">http://blog.csdn.net/ybdesire/article/details/49284699</a>
		<span class="cred">
		 e^(iπ)+1=0<zhangjianan1996@vip.qq.com>
	</span></p>
	<p><span>设置document.domain实现js跨域注意点:</span><a href="http://blog.csdn.net/yaoyuan_difang/article/details/8158847">http://blog.csdn.net/yaoyuan_difang/article/details/8158847</a>
		<span class="cred">
		 e^(iπ)+1=0<zhangjianan1996@vip.qq.com>
	</span></p>
	<p><span>手机web开发，click,touch,tap事件浅析:</span><a href="http://blog.csdn.net/fengwizard/article/details/17384949">http://blog.csdn.net/fengwizard/article/details/17384949</a>
		<span class="cred">
		 e^(iπ)+1=0<zhangjianan1996@vip.qq.com>
	</span></p>
	<p><span>完全理解jQuery源代码，在前端行业算什么水平？:</span><a href="https://www.zhihu.com/question/20521802">https://www.zhihu.com/question/20521802</a>
		<span class="cred">
		 e^(iπ)+1=0<zhangjianan1996@vip.qq.com>
	</span></p>
	<p><span>延迟脚本在DOMContentLoaded事件之前执行？:</span><a href="https://stackoverflow.com/questions/42950574/are-deferred-scripts-executed-before-domcontentloaded-event">https://stackoverflow.com/questions/42950574/are-deferred-scripts-executed-before-domcontentloaded-event</a>
		<span class="cred">
		 讲师-快乐动起来啊
	</span></p>
	<p><span>一道常被人轻视的前端JS面试题:</span><a href="https://www.cnblogs.com/xxcanghai/p/5189353.html">https://www.cnblogs.com/xxcanghai/p/5189353.html</a>
		<span class="cred">
		 樛木
	</span></p>
	<p><span>关于运算符优先级问题:</span><a href="https://gitlab.com/imooc/interview-source/issues/2">https://gitlab.com/imooc/interview-source/issues/2</a>
		<span class="cred">
		 小小
	</span></p>
	<p><span>JS中的typeof和类型判断:</span><a href="http://dunizb.com/2017/07/08/JS-in-the-typeof-and-type-judgment/">http://dunizb.com/2017/07/08/JS-in-the-typeof-and-type-judgment/</a>
		<span class="cred">
		 夜深篱落一灯明
	</span></p>
	<p><span>源码+复习资料+面经+问题讨论:</span><a href="https://gitlab.com/imooc/interview-source">https://gitlab.com/imooc/interview-source</a>
		<span class="cred">
		 imSHFs
	</span></p>
	<p><span>深入剖析 JavaScript 的深复制:</span><a href="http://jerryzou.com/posts/dive-into-deep-clone-in-javascript/">http://jerryzou.com/posts/dive-into-deep-clone-in-javascript/</a>
		<span class="cred">
		 imSHFs
	</span></p>
	<p><span>JavaScrip-StepPitGuide《JavaScript踩坑指南》:</span><a href="https://github.com/TYRMars/JavaScrip-StepPitGuide">https://github.com/TYRMars/JavaScrip-StepPitGuide</a>
		<span class="cred">
		  e^(iπ)+1=0
	</span></p>
	<p><span>CSS深入理解流体特性和BFC特性下多栏自适应布局:</span><a href="http://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/">http://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/</a>
		<span class="cred">
		  小小
	</span></p>
	<p><span>360一二三面:</span><a href="http://www.jianshu.com/p/5fd68edd4ab3">http://www.jianshu.com/p/5fd68edd4ab3</a>
		<span class="cred">
		  樛木
	</span></p>
	<p><span>知识库:</span><a href="http://lib.csdn.net/bases/fd/Software-Develop/ast/frontend">http://lib.csdn.net/bases/fd/Software-Develop/ast/frontend</a>
		<span class="cred">
		  小小
	</span></p>
	<p><span>Git教程:</span><a href="https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/">https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/</a>
		<span class="cred">
		 小刀
	</span></p>
	<p><span>通俗易懂的git教程:</span><a href="http://backlogtool.com/git-guide/cn/intro/intro1_1.html ">http://backlogtool.com/git-guide/cn/intro/intro1_1.html </a>
		<span class="cred">
		 讲师-快乐动起来啊
	</span></p>
	<p><span>深入浅出 - vue之深入响应式原理:</span><a href="https://github.com/berwin/Blog/issues/11">https://github.com/berwin/Blog/issues/11</a>
		<span class="cred">
		 讲师-快乐动起来啊
	</span></p>
	<p><span>详解web缓存:</span><a href="https://segmentfault.com/a/1190000006741200">https://segmentfault.com/a/1190000006741200</a>
		<span class="cred">
		 小小
	</span></p>
	<p><span>潜入FLEXBOX:</span><a href="https://bocoup.com/blog/dive-into-flexbox">https://bocoup.com/blog/dive-into-flexbox</a>
		<span class="cred">
		 樛木
	</span></p>
	<p><span>FLEXBOX FROGGY:</span><a href="http://flexboxfroggy.com/#zh-cn">http://flexboxfroggy.com/#zh-cn</a>
		<span class="cred">
		 0119
	</span></p>
	<p><span>蘑菇街一二面:</span><a href="http://www.jianshu.com/p/e0aadab31479">http://www.jianshu.com/p/e0aadab31479</a>
		<span class="cred">
		 樛木
	</span></p>
	<p><span>网易实习面试，被虐哭:</span><a href="http://m.nowcoder.com/discuss/33742?from=ios_app_1.02.05">http://m.nowcoder.com/discuss/33742?from=ios_app_1.02.05</a>
		<span class="cred">
		 樛木
	</span></p>
	<p><span>vue的双向绑定原理及实现:</span><a href="http://transcoder.tradaquan.com/from=1012852s/bd_page_type=1/ssid=672ebbab/uid=0/pu=sz%40320_1004%2Cta%40iphone_2_6.0_11_9.0%2Cusm%401/baiduid=87EA91E1A4122F054A2B3E0D40131DEF/w=0_10_/t=iphone/l=3/tc?ref=www_iphone&lid=12732224663698296230&order=5&fm=alhm&h5ad=1&srd=1&dict=32&tj=h5_mobile_5_0_10_title&w_qd=IlPT2AEptyoA_yk5wuwcqxGuClNVj7wpzSQYaxPVzAYtLOe&sec=23364&di=0b8c5341cc7f01c5&bdenc=1&tch=124.339.255.1228.0.0&nsrc=IlPT2AEptyoA_yixCFOxXnANedT62v3IEQGG_ytK1DK6mlrte4viZQRAXjbxKXXLUoCb9n00sqcHuH7c_GUo6so4g43&eqid=b0b1f2df9834500010000000599982ae&wd=&clk_info=%7B%22srcid%22%3A%221599%22%2C%22tplname%22%3A%22h5_mobile%22%2C%22t%22%3A1503232754687%2C%22sig%22%3A%2286768%22%2C%22xpath%22%3A%22div-a-h3%22%7D">http://transcoder.tradaquan.com/from=1012852s/bd_page_type=1/ssid=672ebbab/uid=0/pu=sz%40320_1004%2Cta%40iphone_2_6.0_11_9.0%2Cusm%401/baiduid=87EA91E1A4122F054A2B3E0D40131DEF/w=0_10_/t=iphone/l=3/tc?ref=www_iphone&lid=12732224663698296230&order=5&fm=alhm&h5ad=1&srd=1&dict=32&tj=h5_mobile_5_0_10_title&w_qd=IlPT2AEptyoA_yk5wuwcqxGuClNVj7wpzSQYaxPVzAYtLOe&sec=23364&di=0b8c5341cc7f01c5&bdenc=1&tch=124.339.255.1228.0.0&nsrc=IlPT2AEptyoA_yixCFOxXnANedT62v3IEQGG_ytK1DK6mlrte4viZQRAXjbxKXXLUoCb9n00sqcHuH7c_GUo6so4g43&eqid=b0b1f2df9834500010000000599982ae&wd=&clk_info=%7B%22srcid%22%3A%221599%22%2C%22tplname%22%3A%22h5_mobile%22%2C%22t%22%3A1503232754687%2C%22sig%22%3A%2286768%22%2C%22xpath%22%3A%22div-a-h3%22%7D</a>
		<span class="cred">
		 浮世
	</span></p>
	<p><span>前端基础面试题(HTML+CSS部分):</span><a href="https://zhuanlan.zhihu.com/p/28415923">https://zhuanlan.zhihu.com/p/28415923</a>
		<span class="cred">
		 乐
	</span></p>
	<p><span>前端基础面试题(JS部分):</span><a href="https://zhuanlan.zhihu.com/p/28428367">https://zhuanlan.zhihu.com/p/28428367</a>
		<span class="cred">
		 乐
	</span></p>
	<p><span>前端跳槽面试那些事儿:</span><a href="http://www.imooc.com/article/20010">http://www.imooc.com/article/20010</a>
		<span class="cred">
		 讲师-快乐动起来啊
	</span></p>
	<p><span>总结的new的实现 :</span><a href="https://gitlab.com/chenli0615/interview-source/blob/chenli/source/new.html">https://gitlab.com/chenli0615/interview-source/blob/chenli/source/new.html</a>
		<span class="cred">
		 小小
	</span></p>
	<p><span>前端JQuery系列:</span><a href="https://github.com/JsAaron/jQuery">https://github.com/JsAaron/jQuery</a>
		<span class="cred">
		 zj-panda
	</span></p>
	<p><span>解析 神奇的 Object.defineProperty:</span><a href="http://www.cnblogs.com/weiqu/p/5860945.html">http://www.cnblogs.com/weiqu/p/5860945.html</a>
		<span class="cred">
		 浮世
	</span></p>
	<p><span>剖析Vue原理&实现双向绑定MVVM:</span><a href="https://segmentfault.com/a/1190000006599500">https://segmentfault.com/a/1190000006599500</a>
		<span class="cred">
		 钓猫的小鱼
	</span></p>
	<p><span>源码+复习资料+面经+问题讨论:</span><a href="https://gitlab.com/imooc/interview-source">https://gitlab.com/imooc/interview-source</a>
		<span class="cred">
		 愛情輸給眼淚
	</span></p>
	<p><span>源码+复习资料+面经+问题讨论:</span><a href="https://itbilu.com/javascript/js/EkCyw5lHl.html">https://itbilu.com/javascript/js/EkCyw5lHl.html</a>
		<span class="cred">
		 讲师-快乐动起来啊
	</span></p>
	<p><span>网易校招前端一二面:</span><a href="https://zhuanlan.zhihu.com/p/28771824?utm_medium=social&utm_source=qq">https://zhuanlan.zhihu.com/p/28771824?utm_medium=social&utm_source=qq</a>
		<span class="cred">
		 樛木
	</span></p>
	<p><span> display: inline-block 元素之间出现的空格:</span><a href="https://www.zhihu.com/question/21468450">https://www.zhihu.com/question/21468450</a>
		<span class="cred">
		 钓猫的小鱼
	</span></p>
	<p><span> 去除inline-block元素间间距的N种方法:</span><a href="http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/">http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/</a>
		<span class="cred">
		 小刀
	</span></p>
	<p><span> 拜拜了,浮动布局-基于display:inline-block的列表布局:</span><a href="http://www.zhangxinxu.com/wordpress/2010/11/%E6%8B%9C%E6%8B%9C%E4%BA%86%E6%B5%AE%E5%8A%A8%E5%B8%83%E5%B1%80-%E5%9F%BA%E4%BA%8Edisplayinline-block%E7%9A%84%E5%88%97%E8%A1%A8%E5%B8%83%E5%B1%80/">http://www.zhangxinxu.com/wordpress/2010/11/%E6%8B%9C%E6%8B%9C%E4%BA%86%E6%B5%AE%E5%8A%A8%E5%B8%83%E5%B1%80-%E5%9F%BA%E4%BA%8Edisplayinline-block%E7%9A%84%E5%88%97%E8%A1%A8%E5%B8%83%E5%B1%80/</a>
		<span class="cred">
		  Mr.Li
	</span></p>
	<p><span> JSONP的优缺点:</span><a href="http://www.qdfuns.com/notes/18271/df9ecd8f0ca5e523ae75745a3996c47c.html">http://www.qdfuns.com/notes/18271/df9ecd8f0ca5e523ae75745a3996c47c.html</a>
		<span class="cred">
		  Mr.L
	</span></p>
	<p><span>JS怎样判断一个对象是否存在"环"？:</span><a href="https://segmentfault.com/q/1010000010856332">https://segmentfault.com/q/1010000010856332</a>
		<span class="cred">
		 讲师-快乐动起来啊
	</span></p>
	<p><span>阿里的前端笔试题答案:</span><a href="https://gitlab.com/imooc/interview-source/">https://gitlab.com/imooc/interview-source/</a>
		<span class="cred">
		  讲师-快乐动起来啊
	</span></p>
	<p><span>个人分享--web前端学习资源分享:</span><a href="https://segmentfault.com/a/1190000010880049">https://segmentfault.com/a/1190000010880049</a>
		<span class="cred">
		  zj-panda
	</span></p>
	<p><span>关于webpack里面图片打包的路径问题:</span><a href="https://segmentfault.com/q/1010000005099602">https://segmentfault.com/q/1010000005099602</a>
		<span class="cred">
		  文子
	</span></p>
	<p><span>前端工程师300道面试题整理:</span><a href="https://zhuanlan.zhihu.com/p/28911400?utm_medium=social&utm_source=qq">https://zhuanlan.zhihu.com/p/28911400?utm_medium=social&utm_source=qq</a>
		<span class="cred">
		  樛木
	</span></p>
	<p><span>JS中的面向对象:</span><a href="http://www.jianshu.com/p/607daed38fa0?utm_campaign=hugo&utm_medium=reader_share&utm_content=note&utm_source=qq">http://www.jianshu.com/p/607daed38fa0?utm_campaign=hugo&utm_medium=reader_share&utm_content=note&utm_source=qq</a>
		<span class="cred">
		  樛木
	</span></p>
	<p><span>多个标签页之间的通信:</span><a href="https://segmentfault.com/q/1010000006664804">https://segmentfault.com/q/1010000006664804</a>
		<span class="cred">
		  ABCD潇潇洒洒
	</span></p>
	<p><span>从移动端 click 到摇一摇:</span><a href="http://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=2651552583&idx=2&sn=00c75778efaf4709d0752bffadeb5285&chksm=8025ac86b75225903e0bcf69a5ecc41d4728183d1b9c567b176115a1ad557500827e68ea267b&mpshare=1&scene=23&srcid=09081I5DeMDZExOU7qxtqRI4#rd">http://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=2651552583&idx=2&sn=00c75778efaf4709d0752bffadeb5285&chksm=8025ac86b75225903e0bcf69a5ecc41d4728183d1b9c567b176115a1ad557500827e68ea267b&mpshare=1&scene=23&srcid=09081I5DeMDZExOU7qxtqRI4#rd</a>
		<span class="cred">
		  善良的兔子
	</span></p>
	<p><span>JavaScript拼图游戏:</span><a href="http://javascript-puzzlers.herokuapp.com/">http://javascript-puzzlers.herokuapp.com/</a>
		<span class="cred">
		  樛木
	</span></p>
	<p><span>创建es6项目与gulp为vue或反应:</span><a href="https://github.com/cucygh/es6-vue-react-gulp">https://github.com/cucygh/es6-vue-react-gulp</a>
		<span class="cred">
		  樛木
	</span></p>
	<p><span>我遇到的前端面试题2017:</span><a href="https://segmentfault.com/a/1190000011091907">https://segmentfault.com/a/1190000011091907</a>
		<span class="cred">
		 讲师-快乐动起来啊
	</span></p>
	<p><span>网易前后端分离实践:</span><a href="https://github.com/genify/ita1024/blob/master/%E7%BD%91%E6%98%93%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%AE%9E%E8%B7%B5.md">https://github.com/genify/ita1024/blob/master/%E7%BD%91%E6%98%93%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB%E5%AE%9E%E8%B7%B5.md</a>
		<span class="cred">
		 樛木
	</span></p>
	</div>
	<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>
	<script type="text/javascript">
		(function($){
			var textTitle = "";
			var titleArr = [];
			$(".listbox p >span:nth-child(1)").each(function(index,ele){
				$(this).attr("id",index);
				 textTitle = $(this).text();
				titleArr.push(textTitle);
			})
			var menuList = ""
			for (var i = 0; i < titleArr.length; i++) {
				menuList = menuList + '<li><a href="#'+i+'" title="">'+titleArr[i]+'</a></li>'
			}
			$(".listbox p >a:nth-child(2)").each(function(){
				$(this).attr('target','_blank');
			});
			$(".menu ul").html(menuList)
			var num = 0 ;
			$(".menu .btn").click(function(){
				if(num % 2 === 0){
					$(".menu").addClass('active');
					num++
					$(this).text("关闭")
				}else{
					$(".menu").removeClass('active');
					num++
					$(this).text("展开")
				}
				
			})
		})(jQuery)
	</script>
</body>
</html>